<template>
	<div id="app">
		<hote-header />
		<div class="hote-admin-body">
			<hote-sidebar />
			<div class="room-detail-container">
				<div class="room-detail-left-container">
					<img src="/images/home_line.png" alt="" class="hote-home-icon">
					<h2 class="room-detail-num">房间号:{{roomData.roomNum}}</h2>
					<h2 class="room-detail-title">{{roomData.name}}</h2>
				</div>
				<div class="room-detail-right-container"></div>
			</div>
			<div class="room-router-container">
				<ul class="room-button-box">
					<li class="room-buton" id="routerButton-0" @click="menuClick" :class="menuIndex == 0 ? 'room-button-active' : ''">基本信息</li>
					<li class="room-buton" id="routerButton-1" @click="menuClick" :class="menuIndex == 1 ? 'room-button-active' : ''">空调状态</li>
					<li class="room-buton" id="routerButton-2" @click="menuClick" :class="menuIndex == 2 ? 'room-button-active' : ''">开关状态</li>
				</ul>
				<div class="room-router-box">
					<transition name="slide-left">
				    	<router-view></router-view>
				    </transition>
				</div>
			</div>
		</div>
		<hote-status />
	</div>
</template>

<style>
	.room-detail-container, .room-router-container {
		margin-left: 220px;
		padding: 10px;	
	}
	.room-detail-left-container {
		position: relative;
	}
	.hote-home-icon {
		position: absolute;
	}
	.room-detail-num, .room-detail-title {
		margin-left: 70px;
		font-size: 18px;
		color: #1296db;
	}
	.room-detail-title {
		margin-top: 18px;
	}
	.room-button-box {
		width: 217px;
		line-height: 35px;
		overflow: hidden;
		background-color: #79858e;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.room-buton {
		width: 70px;
		text-align: center;
		font-size: 14px;
		display: inline-block;
		cursor: pointer;
		background-color: transparent;
	}
	.room-router-box {
		width: 100%;
		min-height: 200px;
		border: 1px solid #79858e;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
	}
	.room-button-active {
		background-color: #4f99d0;
		color: #fff;
	}
</style>

<script>
	import config  from '../../config';
	import Header from '../../components/Header';
	import Sidebar from '../../components/Sidebar';
	import RoomStatus from './RoomStatus';
	import roomDetail from '../../mock/roomDetail';

	const statusData = config.status || [];
	const roomRouter = config.roomRouter || [];
	const roomData = roomDetail.roomData || {};

	export default {
		data() {
			return {
				roomData,
				menuIndex: '0'
			}
		},
		components: {
			'hote-header': Header,
			'hote-status': RoomStatus,
			'hote-sidebar': Sidebar
		},
		methods: {
			menuClick: function(event) {
				this.menuIndex = event.target.id.split('-')[1];
				this.$router.push(roomRouter[this.menuIndex]);
			}
		}
	}
</script>